<%@ page import="com.pijunn.users.AppUser" %>
<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main">
		<title>Pijunn - Registration</title>
	</head>

	<body>
	<div id="width960">
	
			
		<div class="row">
			<div class="col c12">
				<h4 class="indent">It&apos;s always Free to Register with Pijunn! We value your privacy. We will never sell, nor use your personal information in any devious ways.  It will only be used to connect you with your lost property.</h4>
			</div>
		</div>
	
		<div class="row">
			<div class="col c1">&nbsp;</div>
			<div class="col c10">		
				<div id="notag-box" class="formBox">
					<g:if test="${flash.message}">
					<div class="message" role="status">${flash.message}</div>
					</g:if>
					<g:hasErrors bean="${appUserInstance}">
					<ul class="errors" role="alert">
						<g:eachError bean="${appUserInstance}" var="error">
						<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
						</g:eachError>
					</ul>
					</g:hasErrors>
					<g:form action="register">
						<fieldset class="form">
						<fieldset class="embedded">
							<legend>Identity</legend>
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'username', 'error')} required">
								<label for="username"><g:message code="appUser.username.label" default="Username:" /></label>
								<span class="required-indicator">*</span>
								<g:textField name="username" value="${appUserInstance?.username}" hint="User ID"/>
							</div>
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'firstName', 'error')} required">
								<label for="firstName"><g:message code="appUser.firstName.label" default="First Name:"/></label>
								<span class="required-indicator">*</span>
								<g:textField name="firstName" value="${appUserInstance?.firstName}" hint="First Name"/>
							</div>
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'lastName', 'error')} required">
								<label for="lastName"><g:message code="appUser.lastName.label" default="Last Name:"/></label>
								<span class="required-indicator">*</span>
								<g:textField name="lastName" value="${appUserInstance?.lastName}" hint="Last Name"/>
							</div>
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'password', 'error')} required">
								<label for="password"><g:message code="appUser.password.label" default="Password:"/></label>
								<span class="required-indicator">*</span>
								<g:field type="password" name="password" required="" value="${appUserInstance?.password}"/>
							</div>
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'confirmPassword', 'error')} required">
								<label for="confirmPassword"><g:message code="appUser.confirmPassword.label" default="Confirm Password:"/></label>
								<span class="required-indicator">*</span>
								<g:field type="password" name="confirmPassword" required="" value="${confirmPassword}"/>
							</div>
						</fieldset>
						<fieldset class="embedded">
							<legend>Mailing Location</legend>
								<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'mailingAddress.address1', 'error')} required">
									<label for="mailingAddress.address1">
										<g:message code="appUser.mailingAddress.address1.label" default="Address1" />
										<span class="required-indicator">*</span>
									</label>
									<g:textField name="mailingAddress.address1" required="" value="${appUserInstance?.mailingAddress?.address1}"/>
								</div>
								
								<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'mailingAddress.address2', 'error')} ">
									<label for="mailingAddress.address2">
										<g:message code="appUser.mailingAddress.address2.label" default="Address2" />
										
									</label>
									<g:textField name="mailingAddress.address2" value="${appUserInstance?.mailingAddress?.address2}"/>
								</div>
								
								<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'mailingAddress.country', 'error')} required">
									<label for="mailingAddress.country">
										<g:message code="appUser.mailingAddress.country.label" default="Country" />
										<span class="required-indicator">*</span>
									</label>
									<g:select name="mailingAddress.country" from="${['US', 'CA']}"
         								 valueMessagePrefix="mailingAddress.country" />
								</div>
								
								<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'mailingAddress.zipCode', 'error')} required">
									<span class="required-indicator"style="margin-left:25px;">Begin typing a Zip code and select your City and State:</span><br/>
									<label for="mailingAddress.zipCode">
										<g:message code="appUser.mailingAddress.zipCode.label" default="Zip Code" />
										<span class="required-indicator">*</span>
									</label>
									<g:textField name="mailingAddress.zipCode" pattern="${addressInstance.constraints.zipCode.matches}" required="" value="${appUserInstance?.mailingAddress?.zipCode}"/>
								</div>
								
								<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'mailingAddress.city', 'error')} required">
									<label for="mailingAddress.city">
										<g:message code="appUser.mailingAddress.city.label" default="City" />
										<span class="required-indicator">*</span>
									</label>
									<g:textField name="mailingAddress.city" required="" value="${appUserInstance?.mailingAddress?.city}"/>
								</div>
								
								<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'mailingAddress.state', 'error')} required">
									<label for="mailingAddress.state">
										<g:message code="appUser.mailingAddress.state.label" default="State" />
										<span class="required-indicator">*</span>
									</label>
									<g:textField name="mailingAddress.state" required="" value="${appUserInstance?.mailingAddress?.state}"/>
								</div>
						</fieldset>
						<fieldset class="embedded">
							<legend>Contacting you</legend>
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'contactEMail', 'error')} required">
								<label for="contactEMail">
									<g:message code="appUser.contactEMail.label" default="E-Mail Address" />
									<span class="required-indicator">*</span>
								</label>
								<g:field type="email" name="contactEMail" required="" value="${appUserInstance?.contactEMail}"/>
							</div>
							
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'confirmEMail', 'error')} required">
								<label for="confirmEMail">
									<g:message code="appUser.contactEMail.label" default="Confirm E-Mail:"/>
									<span class="required-indicator">*</span>
								</label>
								<input type="text" hint="Confirm E-Mail" name="confirmEMail"  value="${confirmEMail}"/><br/>
							</div>

							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'contactCellPhone', 'error')} ">
								<label for="contactCellPhone">
									<g:message code="appUser.contactCellPhone.label" default="Contact Cell Phone" />
								</label>
								<g:textField name="contactCellPhone" value="${appUserInstance?.contactCellPhone}"/>
							</div>
							
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'contactOtherPhone', 'error')} ">
								<label for="contactOtherPhone">
									<g:message code="appUser.contactOtherPhone.label" default="Contact Other Phone" />
								</label>
								<g:textField name="contactOtherPhone" value="${appUserInstance?.contactOtherPhone}"/>
							</div>
							
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'contactSkypeId', 'error')} ">
								<label for="contactSkypeId">
									<g:message code="appUser.contactSkypeId.label" default="Contact Skype Id" />
								</label>
								<g:textField name="contactSkypeId" value="${appUserInstance?.contactSkypeId}"/>
							</div>
						</fieldset>
						<fieldset class="embedded">
							<legend>Human Test</legend>
							<jcaptcha:jpeg name="imageCaptcha" height="100px" width="180px"  style="margin-left:100px;"/>
							<div class="fieldcontain ${hasErrors(bean: appUserInstance, field: 'captchaResponse', 'error')} required">
							<label for="captchaCode"><g:message code="appUser.contactSkypeId.label" default="Enter Symbol:"/></label>
							<g:textField hint="Code" name="captchaResponse"/><br/>
							</div>
						</fieldset>
						</fieldset>
						<input type="submit" id="register" class="basic-ok-button submitButton" value="Register"/>
						<input type="reset" class="basic-cancel-button submitButton" value="Clear"/>
					</g:form>
				</div>
			</div>
		</div>
			
	</div>
	</body>
	<g:javascript>
	$(function(){
	
		$('#username').focus();
        
        $('form').submit(function(){
        	$('form input[disabled]').removeAttr('disabled');
        	
        	return true;
        });
        
        function getCountry() {
        	return $('select[name="mailingAddress.country"]').val();
        }
	});
	</g:javascript>
</html>
